<template>
  <div :class="['container',`custom-class${cardType}`,customClass]" v-if="cardType !== 7">
    <div class="container-image">
      <img :src="require(`./img/${cardType}.png`)" alt="" class="image" />
      <span class="main-text">{{ mainText }}</span>
    </div>
    <div class="context">
      <span class="subtitle">{{ subtitle }}</span>
      <span class="title" v-if="forMatTitle">{{ forMatTitle }}</span>
      <slot></slot>
    </div>
  </div>
  <div v-else :class="['container', customClass]">
    <div class="titleBg">{{ mainText }}</div>
    <div class="otherContext">
      <span>{{ subtitle }}/</span>
      <span v-if="forMatTitle">{{ forMatTitle }}</span>
    </div>
    <img src="./img/7.png" alt="" />
  </div>
</template>
<script>
export default {
  name: "data-v-cardProgress",
  props: {
    cardType: {
      type: Number,
      default: 1,
    },
    title: {
      type: String | Number,
      default: "",
    },
    mainText: {
      type:  String | Number,
      default: "",
    },
    run: {
      type: Boolean,
      default: false,
    },
    customClass: {
      type: String,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
  },
  computed: {
    forMatTitle(){
      const num = new Intl.NumberFormat().format(Number(this.title));
      return num!=0?num:''
    }
  },
};
</script>
<style lang="less" src='./index.less' scoped></style>